import 'package:flutter/material.dart';
import 'package:xinxuan/common/appbar_util.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:xinxuan/common/scroll_configuration_common.dart';
import 'package:xinxuan/controllers/my_controller/bank_card_controller.dart';
import 'package:xinxuan/router/app_routers.dart';
import 'package:get/get.dart';
import 'package:x_common_utils/utils/inkWell_util.dart';
import 'package:xinxuan/utils/card_util.dart';
import 'package:xinxuan/utils/color_util.dart';
import 'package:xinxuan/vo/common_vo/common_bank_card_item_vo.dart';

class BankCardListPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return GetBuilder<BankCardController>(
      init: BankCardController(),
      builder: (controller) {
        return Scaffold(
          appBar: AppBarUtil(
            title: '收款账户管理',
            backgroundColor: pageBgColor,
          ),
          body: ScrollConfigurationCommon(
            child: SingleChildScrollView(
              child: Column(
                children: [
                  bankBody(title: '抢购银行卡', banks: controller.purchaseBankArr, type: 1),
                  bankBody(title: '提现银行卡', banks: controller.withdrawalBankArr, type: 2),
                ],
              ),
            ),
          ),
        );
      }
    );
  }

  /// 抢购银行卡列表
  Widget bankBody({ required String title, required List<CommonBankCardItemVo> banks, required int type }) {
    return Column(
      children: [
        Container(
          height: 50.h,
          padding: EdgeInsets.symmetric(horizontal: 12.w),
          alignment: Alignment.centerLeft,
          child: Text(
            title,
            style: TextStyle(
              color: textBlackColor,
              fontSize: 16.sp,
              fontWeight: FontWeight.bold
            ),
          ),
        ),
        banks.length <= 0 ? Container(
          padding: EdgeInsets.symmetric(horizontal: 12.w),
          child: Stack(
            children: [
              InkWellUtil.shakeProofInkWell(Container(
                height: 151.h,
                width: 351.w,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage(
                      'assets/icons/icon_add_bank_bg.png',
                    ),
                    fit: BoxFit.fill,
                  )
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Image.asset(
                      'assets/icons/icon_add_g.png',
                      width: 26.w,
                      height: 26.w,
                    ),
                    SizedBox(width: 8.w),
                    Text(
                      '填写银行卡信息',
                      style: TextStyle(
                        fontSize: 18.sp,
                        color: textSubtitleColor
                      ),
                    )
                  ],
                ),
              ), () {
                Get.toNamed(
                  '${AppRouters.COMMON_PAGE}${AppRouters.MY_INFO_PAGE}${AppRouters.BANK_CARD_LIST_PAGE}${AppRouters.ADD_EDIT_BANK_CARD_PAGE}',
                  arguments: {
                    'title': '新增收款账户',
                    'type': 0,
                    'bankType': type
                  }
                );
              }),
              
            ],
          ),
        ) : Column(
          children: banks.map((item) {
            if (item.bankId == 1) {
              return _aliBank(item);
            } else if (item.bankId == 2) {
              return _weCharBank(item);
            } else {
              return _bankItem(item);
            }
          }).toList(),
        )
      ],
    );
  }

  /// 支付宝账号
  Widget _aliBank(CommonBankCardItemVo item) {
    return InkWellUtil.shakeProofInkWell(Container(
      padding: EdgeInsets.symmetric(horizontal: 12.w),
      margin: EdgeInsets.only(bottom: 4.h),
      child: Stack(
        children: [
          Container(
            height: 151.h,
            width: 351.w,
            padding: EdgeInsets.all(16.w),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10.w),
              gradient: LinearGradient(
                colors: [
                  bgAli1,
                  bgAli2,
                ]
              )
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  children: [
                    Image.asset(
                      'assets/icons/icon_bank.png',
                      width: 30.w,
                      height: 30.w,
                    ),
                    SizedBox(width: 10.w),
                    Expanded(child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          '${item.accountName}',
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                            color: textWhiteColor,
                            fontSize: 18.sp
                          ),
                        ),
                        SizedBox(height: 4.h),
                        Opacity(
                          opacity: .7,
                          child: Text(
                            '支付宝',
                            style: TextStyle(
                              color: textWhiteColor,
                              fontSize: 14.sp
                            ),
                          ),
                        )
                      ],
                    ))
                  ],
                ),
                Row(
                  children: [
                    SizedBox(width: 40.w),
                    Expanded(child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          // '${item.cardNumber}',
                          CardUtil.getPayCardStr('${item.cardNumber}'),
                          overflow: TextOverflow.ellipsis,
                          maxLines: 1,
                          style: TextStyle(
                            color: textWhiteColor,
                            fontSize: 26.sp
                          ),
                        ),
                        SizedBox(height: 16.h)
                      ],
                    ))
                  ],
                )
              ],
            ),
          ),
          Positioned(
            bottom: 31.h,
            right: 19.w,
            child: Image.asset(
              'assets/icons/icon_bank_ali.png',
              width: 93.w,
              height: 75.h,
            )
          ),
          _cardType(item.type!)
        ],
      ),
    ), () {
      Get.toNamed(
        '${AppRouters.COMMON_PAGE}${AppRouters.MY_INFO_PAGE}${AppRouters.BANK_CARD_LIST_PAGE}${AppRouters.ADD_EDIT_BANK_CARD_PAGE}',
        arguments: {
          'title': '编辑收款账户',
          'type': 1,
          'bankType': item.type,
          'data': {
            'accountName': item.accountName,
            'cardNumber': item.cardNumber,
            'isDefault': item.isDefault,
            'bankId': item.bankId,
            'id': item.id,
            'type': item.type,
            'identityNumber': item.identityNumber,
            'subbranch': item.subbranch,
          }
        }
      );
    });
  }

  /// 微信账号
  Widget _weCharBank(CommonBankCardItemVo item) {
    return InkWellUtil.shakeProofInkWell(Container(
      padding: EdgeInsets.symmetric(horizontal: 12.w),
      margin: EdgeInsets.only(bottom: 4.h),
      child: Stack(
        children: [
          Container(
            height: 151.h,
            width: 351.w,
            padding: EdgeInsets.all(16.w),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10.w),
              gradient: LinearGradient(
                colors: [
                  bgWeChar1,
                  bgWeChar2,
                ]
              )
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  children: [
                    Image.asset(
                      'assets/icons/icon_bank.png',
                      width: 30.w,
                      height: 30.w,
                    ),
                    SizedBox(width: 10.w),
                    Expanded(child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          '${item.accountName}',
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                            color: textWhiteColor,
                            fontSize: 18.sp
                          ),
                        ),
                        SizedBox(height: 4.h),
                        Opacity(
                          opacity: .7,
                          child: Text(
                            '微信',
                            style: TextStyle(
                              color: textWhiteColor,
                              fontSize: 14.sp
                            ),
                          ),
                        )
                      ],
                    ))
                  ],
                ),
                Row(
                  children: [
                    SizedBox(width: 40.w),
                    Expanded(child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          // '${item.cardNumber}',
                          CardUtil.getPayCardStr('${item.cardNumber}'),
                          overflow: TextOverflow.ellipsis,
                          maxLines: 1,
                          style: TextStyle(
                            color: textWhiteColor,
                            fontSize: 19.sp
                          ),
                        ),
                        SizedBox(height: 16.h)
                      ],
                    ))
                  ],
                )
              ],
            ),
          ),
          Positioned(
            top: 45.h,
            right: 19.w,
            child: Image.asset(
              'assets/icons/icon_bank_wechar.png',
              width: 93.w,
              height: 75.h,
            )
          ),
          _cardType(item.type!)
        ],
      ),
    ), () {
      Get.toNamed(
        '${AppRouters.COMMON_PAGE}${AppRouters.MY_INFO_PAGE}${AppRouters.BANK_CARD_LIST_PAGE}${AppRouters.ADD_EDIT_BANK_CARD_PAGE}',
        arguments: {
          'title': '编辑银行卡',
          'type': 1,
          'bankType': item.type,
          'data': {
            'accountName': item.accountName,
            'cardNumber': item.cardNumber,
            'isDefault': item.isDefault,
            'bankId': item.bankId,
            'id': item.id,
            'type': item.type,
            'identityNumber': item.identityNumber,
            'subbranch': item.subbranch,
          }
        }
      );
    });
  }

  /// 银行卡
  Widget _bankItem(CommonBankCardItemVo item) {
    return InkWellUtil.shakeProofInkWell(Container(
      padding: EdgeInsets.symmetric(horizontal: 12.w),
      margin: EdgeInsets.only(bottom: 4.h),
      child: Stack(
        children: [
          Container(
            height: 151.h,
            width: 351.w,
            padding: EdgeInsets.all(16.w),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10.w),
              gradient: LinearGradient(
                colors: [
                  bgBank1,
                  bgBank2,
                ]
              )
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  children: [
                    Image.asset(
                      'assets/icons/icon_bank.png',
                      width: 30.w,
                      height: 30.w,
                    ),
                    SizedBox(width: 10.w),
                    Expanded(child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          '${item.accountName}',
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                            color: textWhiteColor,
                            fontSize: 18.sp
                          ),
                        ),
                        SizedBox(height: 4.h),
                        Opacity(
                          opacity: .7,
                          child: Text(
                            '银联',
                            style: TextStyle(
                              color: textWhiteColor,
                              fontSize: 14.sp
                            ),
                          ),
                        )
                      ],
                    ))
                  ],
                ),
                Row(
                  children: [
                    SizedBox(width: 40.w),
                    Expanded(child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          CardUtil.getPayCardStr('${item.cardNumber}'),
                          overflow: TextOverflow.ellipsis,
                          maxLines: 1,
                          style: TextStyle(
                            color: textWhiteColor,
                            fontSize: 19.sp
                          ),
                        ),
                        SizedBox(height: 16.w)
                      ],
                    ))
                  ],
                )
              ],
            ),
          ),
          Positioned(
            top: 45.h,
            right: 19.w,
            child: Image.asset(
              'assets/icons/icon_bank_unionPay.png',
              width: 105.w,
              height: 43.h,
            )
          ),
          _cardType(item.type!)
        ],
      ),
    ), () {
      Get.toNamed(
        '${AppRouters.COMMON_PAGE}${AppRouters.MY_INFO_PAGE}${AppRouters.BANK_CARD_LIST_PAGE}${AppRouters.ADD_EDIT_BANK_CARD_PAGE}',
        arguments: {
          'title': '编辑银行卡',
          'type': 1,
          'bankType': item.type,
          'data': {
            'accountName': item.accountName,
            'cardNumber': item.cardNumber,
            'isDefault': item.isDefault,
            'bankId': item.bankId,
            'id': item.id,
            'type': item.type,
            'identityNumber': item.identityNumber,
            'subbranch': item.subbranch,
          }
        }
      );
    });
  }

  /// 银行卡类型
  Widget _cardType(int type) {
    return Positioned(
      top: 0,
      right: 0,
      child: Container(
        width: 81.w,
        height: 33.h,
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: bgWhiteColor_50,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(20.w),
            topRight: Radius.circular(10.w),
            bottomLeft: Radius.circular(20.w),
          )
        ),
        child: Text(
          type == 1 ? '抢购' : '提现',
          style: TextStyle(
            color: textBlackColor,
            fontSize: 16.sp,
            fontWeight: FontWeight.bold
          ),
        ),
      )
    );
  }
}